import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { getCurrentNode } from '@/store/selectors'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import actionsC from '@/store/actions.js'
import * as utils from '@/utils/index.js'
import PanleWrapper from '@/components/panel/panel-wrapper'
import {tags} from '@/const'
import {Button,Select,MenuItem,IconButton} from '@material-ui/core'

let nodeActions=actionsC()

class PanelTag extends Component {
	constructor(props) {
		super(props);
		this.state={
			tag: 'div',
			tags: tags
		};
		this.handleTagChange = this.handleTagChange.bind(this)
	}
	componentDidMount(){
	}
	componentWillReceiveProps(nextProp){
		const {tag, operationMode,currentNode} = nextProp
		if(operationMode!='draw'){
			this.setState({
				tag: currentNode.tag
			})
		}else{
			this.setState({
				tag: tag
			})
		}
		
	}
	handleTagChange(e){
		let {dispatch,currentNode , currentPath, nodeTree} = this.props;
		let node = _.cloneDeep(currentNode)
		node.tag = e.target.value
		dispatch.nodeUpdateByPath({
			nodeTree: nodeTree,
			path: currentPath,
			node: node
		});
	}
	render() {
		const {tags, tag} = this.state
		return (
			<PanleWrapper clsName="panel-tag" panelName="tag">
				<Select
					value={tag}
					onChange={this.handleTagChange}
					name="tag"
					variant="filled"
				>	
					{utils.render_list(tags,(item, index)=>
						<MenuItem value={item} key={item}>
							{item==tag? <em>{item}</em> : item}
						</MenuItem>
					)}
				</Select>
			</PanleWrapper>
		)
	}
}


PanelTag.defaultProps = {
};

function mapStateToProps(state) {
	return {
		currentNode:getCurrentNode(state),
		nodeTree: state.nodeTree,
		currentPath: state.currentPath,
		tag: state.tag,
		operationMode: state.operationMode
	}
}

function mapDispatchToProps(dispatch) {
	return {
		dispatch: bindActionCreators(nodeActions, dispatch)
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(PanelTag)